<template>
	<div class="circle">
		<div class="s">
			<div class="head">
				<span>吃货圈</span>
				<div class="box"></div>
				<button class="btn1" @click="go">BACK</button>
				<div class="btn2">
					<Icon type="md-search" size="19"/>
				</div>
				<div class="headrs" :style="head">
					<List>
						<ListItem>
							<template slot="extra">
								<button class="pos" @click="fan">
									<Icon type="ios-arrow-back"/>
								</button>
							</template>
							<ListItemMeta/>
							<template slot="extra">
								<button @click="tiao">
									<Icon type="ios-arrow-forward"/>
								</button>
							</template>
						</ListItem>
					</List>
				</div>
			</div>
		</div>
		<div class="acc">
			<div class="bac"></div>
			<button><img :src="'/static/img/'+users.headimg" alt=""></button>
			<div class="name"><p>{{users.name}}</p></div>
		</div>
		<div class="x">
			<div class="in">
				<div class="li">
					<div class="xiang" v-for=" (p,q) in use">
						<div class="left">
							<img :src="'/static/img/'+p.op.headimg" alt="">
							<p v-if="add_friend[q].bool">{{p.comment}}</p>
							<button v-if="add_friend[q].bool" @click="friends(p.op.id)">加为好友</button>
						</div>
						<div class="mname"><p>{{add_friend[q].name}}</p></div>
						<div class="right">
							<div class="one">
								<img :src="'/static/img/'+p.img_one" alt="">
							</div>
							<div class="one">
								<img :src="'/static/img/'+p.img_two" alt="">
							</div>
							<div class="two">
								<button>
									<Icon type="md-heart" size="20"/>
								</button>
								点赞
								<button>
									<Icon type="md-text" size="20"/>
								</button>
								评论
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="btn3" v-if="popup">
				<div class="btn4">
					<button>
						<Icon type="md-settings" size="35"/>
					</button>
				</div>
				<div class="btn">
					<button>
						<Icon type="md-person" size="35"/>
					</button>
				</div>
				<div class="btn4">
					<button>
						<Icon type="ios-reverse-camera" size="35"/>
					</button>
				</div>
			</div>
			<button class="btn7" :style="btn" @click="info"></button>
		</div>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "Discount",
		data() {
			return {
				btn: "background-image: url('" + require("../../assets/quan.png") + "')",
				head: "background-image: url('" + require("../../assets/lvj5.png") + "')",
				popup: false,
				users: {
					headimg: 'default.png',
				},
				use: [],
				add_friend:[],
			}
		},
		async mounted() {
			var users = JSON.parse(localStorage.users)
			let a = await axios.post('/reception/assembly/user_info', {login_id: users.login_id}).then(r => r.data)
			this.users = a.user[0]
			console.log(this.users)
			let quan = await axios.post('/reception/assembly/circle').then(r => r.data)
			console.log(quan)
			let friend = await axios.post('/reception/assembly/friend', {id: users.id})
			console.log(friend)
			for (let a in quan.circle) {
				if(friend.data.state){
					var id =quan.circle[a]
					var f_for = friend.data.friend[a]
					console.log(f_for)
					console.log(id.op.id)
					if(f_for==undefined){
						this.add_friend[a] = {bool:true,name:quan.circle[a].op.name}
					}else{
						if (f_for.id == id.op.id ) {
							this.add_friend[a] = {bool:false,name:quan.circle[a].op.name}
						}else{
							this.add_friend[a] = {bool:true,name:quan.circle[a].op.name}
						}
					}
				}else{
					this.add_friend[a] = {bool:true,name:quan.circle[a].op.name}
				}
			}
			this.use = quan.circle
			console.log(this.add_friend)


		},
		methods: {
			info() {
				if (this.popup) {
					this.popup = false
				} else {
					this.popup = true
				}
			},
			go() {
				return this.$router.push('/users/index')
			},
			tiao() {
				return this.$router.push('/users/nearby')
			},
			fan() {
				return this.$router.push('/users/shoping')
			},
			async friends(id) {
				console.log(id)
				// var f_for = this.friende.data.friend
				// if(this.friende.data.friend == id ){

				// }
				let friende = await axios.post('/reception/assembly/friend_add',{u_id:localStorage.user_id,f_id:id})
				console.log(friende)
			}
		}
	}
</script>
<style lang="less">
	.circle {
		max-width: 1024px;
		max-height: 1366px;
		margin: auto;

		.s {
			width: 100%;
			height: 159px;
			background-color: white;

			.headrs {
				width: 100%;
				height: 126px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: 50%;

				.ivu-list-item {
					padding-top: 43px;
				}

				.pos {
					position: absolute;
					left: 0;
				}

				button {
					background-color: rgba(221, 221, 221, 0);
					border: 0px;
					color: #C2CC85;
				}
			}
		}

		.ivu-dropdown-rel {
		}

		.ivu-btn {
			border: 0px;
		}

		.ivu-input-group-append {
			border: 0px;
		}

		.in {
			overflow: auto;
		}

		.acc {
			height: 52px;
			width: 100%;
			position: relative;

			.bac {
				height: 30px;
				width: 100%;
				background-color: #BDC988;
			}

			.name {
				position: relative;
				width: 100%;
				height: 20px;
				color: #B9C68B;
				font-size: 13px;
				font-weight: bold;
				padding-top: 10px;

				p {
					position: absolute;
					left: 25%;
				}
			}

			button {
				position: absolute;
				height: 120%;
				width: 17%;
				margin-left: 30px;
				margin-top: -40px;
				text-align: center;
				border: 0;
				border-radius: 50%;
				background-color: white;

				img {
					height: 100%;
					padding: 3px;
					border: #BDC988 solid 3px;
					border-radius: 50%;
				}
			}
		}

		.li {
			width: 100%;
			height: 421px;
			background-color: white;
			overflow: auto;

			.xiang {
				height: 150px;
				width: 100%;
				background-color: #C2CC85;
				position: relative;
				margin-top: 10px;
				position: relative;

				.mname {
					position: absolute;
					margin: 0px;
					top: 40%;
					left: 23%;
					color: white;
					font-weight: bold;
				}

				.left {
					position: absolute;
					left: 2%;
					top: 12%;
					width: 20%;
					height: 50%;
					background-color: white;
					padding: 1%;
					border-radius: 50%;

					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

					p {
						height: 15px;
						margin-top: 15px;
						color: white;
						font-size: 15px;
						font-weight: bold;
						text-align: center;
					}

					button {
						height: 20px;
						width: 100%;
						background-color: #F27473;
						border: 0px;
						color: white;
						font-weight: bold;
						text-align: center;
					}
				}

				.right {
					position: absolute;
					right: 2%;
					top: 8%;
					width: 64%;
					height: 70%;
					background-color: white;
					line-height: 1;
					border: 0px;

					.one {
						width: 50%;
						height: 100%;
						float: left;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.two {
						height: 40px;
						width: 140px;
						text-align: right;
						margin: auto;
						/*background-color: #00A000;*/

						button {
							width: 30px;
							height: 30px;
							background-color: rgba(0, 0, 0, 0);
							border: 0px;
							color: #F27473;
						}
					}

					.he {
						height: 100%;
					}

					.wei {
						width: 25px;
						height: 25px;
						background-color: white;
						background-repeat: no-repeat;
						background-size: 25px;
						text-align: center;
						border: 0px;
					}

					.wi {
						width: 100%;
						height: 100%;
					}

					.mag {
						position: absolute;
						bottom: 0;
					}
				}
			}
		}

		.x {
			width: 100%;
			height: 421px;

			.head {
				padding: 0;
			}

			.fol {
				height: 211px;
				width: 100%;

				.img2 {
					width: 100%;
					height: 49%;
					margin: 1% 0;
					float: left;
					border: 1px solid #F0F0F0;
					background-size: 100px;
					background-repeat: no-repeat;
					background-position: center;
				}

				.img1 {
					border: 1px solid #F0F0F0;
					width: 32%;
					height: 100%;
					margin-left: 1%;
					float: left;
					background-size: 20px;
				}

				overflow: auto;
			}
		}

		.foot {
			height: 35px;
			color: #C2CC85;
			width: 100%;
			background: #C2CC85;
			font-size: 22px;
			text-align: center;
			line-height: 1.5;
			position: relative;

			.btn3 {
				margin: auto;
				margin-top: -90px;
				width: 50%;
				height: 125px;
				background-color: rgba(0, 0, 0, 0.5);
				float: left;
				margin-left: 25%;
				/*clear: both;*/
				border-radius: 50%;

				.btn4 {
					width: 33%;
					height: 75px;
					float: left;
					margin-top: 35px;

				}

				button {
					width: 80%;
					height: 50px;
					border-radius: 50%;
					line-height: 0px;
					background-color: white;
					border: 5px solid #C2CC85;
					color: #C2CC85;
				}

				.btn {
					margin-top: 10px;
					width: 33%;
					height: 75px;
					float: left;
				}
			}

			.btn7 {
				width: 60px;
				height: 58px;
				position: absolute;
				left: 42%;
				top: -25px;
				border-radius: 50%;
				border: 0;
				background-repeat: no-repeat;
				background-position: 50% 0;
				background-size: 68px 68px;
			}
		}

		.head {
			height: 35px;
			color: white;
			width: 100%;
			background: #C2CC85;
			font-size: 22px;
			text-align: center;
			/*padding-right: 10px;*/
			line-height: 1.5;
			position: relative;
		}

		.head > .btn2 {
			height: 25px;
			width: 25px;
			float: right;
			margin-top: 5px;
			margin-right: 10px;
			text-align: center;
			padding-top: 3px;
			line-height: 0px;
			background-color: white;
			color: #C2CC85;
			border-radius: 5px;
		}

		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid white;
			/*background-color:#FEFE00 ;*/
		}

		.clear {
			clear: both;
		}

		.btn1 {
			background: white;
			font-size: 10px;
			margin-top: 7px;
			margin-left: -1px;
			color: #C2CC85;
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
	}

</style>